<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		*{margin:0;padding:0;}
		li{list-style:none;}
		a{
			text-decoration: none;
			color:#fff;
		}
		body{
			font-size: 14px;
			color:#fff;
			background-color:#e3e3e3;
		}
		h1,h2,h3,h4,h5,h6{font-weight:normal;}
		#banner{
			height:780px;
			background-image: url(images/banner.jpg);
			background-size:100% 100%;
			background-repeat: no-repeat;
			position:relative;
		}
		.content{
			width: 1180px;
			height:290px;
			transform: translate(0,-42px);
			margin:0 auto;
		}
		.bg{
			height:248px;
			position:absolute;
			bottom:0;
			left:0;
			width:100%;
			background-color:rgba(0,0,0,.7);
		}
		.left{
			width:146px;
			height:248px;
			padding-top:42px;
			float:left;
			background-image:url(images/sprite.png);
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: space-around;
		}
		.right{
			width:1020px;
			height:290px;
			float:right;
		}
		.right-top{
			display:flex;
		}
		.right-bottom {
			width: 1020px;
			height:248px;
			background-image: url(images/sprite.png);
			background-position:-155px 23px;
			background-repeat: no-repeat;
		}
		.left img{
			width:107px;
			cursor:pointer;
		}
		.left-button{
			transition:all .5s;
		}
		.left-button:hover{
			opacity:.9;
		}
		.qr{
			width:107px;
			height:107px;
			position:relative;
		}
		#line{
			position:absolute;
			top:0;
			left:0;
			animation:myanimation 4s infinite linear;
		}
		@keyframes myanimation{
			0%{
				top:0;
			}
			50%{
				top:94%;
			}
			100%{
				top:0%;
			}
		}
		.test{
			width: 107px;
			height: 47px;
			position:relative;
		}
		.popup{
			position:absolute;
			width: 405px;
			height: 192px;
			background-image:url(images/text-bg.png);
			color:#fff;
			font-size: 12px;
			line-height:20px;
			top:-195px;
			padding:10px 7px;
			box-sizing: border-box;
			display: none;
		}	
		.test:hover .popup{
			display: block;
		}
		.right-top li{
			text-align: center;
			line-height:42px;
			width:163px;
			background-color:rgba(0,0,0,.7);
			color:#c2a060;
			position:relative;
		}
		.right-top .icon{
			height: 4px;
			width:83px;
			display: inline-block;
			position:absolute;
			left:50%;
			bottom:5px;
			transform: translate(-50%,0);
			background-image: url(images/sprite.png);
			background-position:-974px -870px;
		}
		.right-top .focus{
			background-image: url(images/sprite.png);
			background-position:-854px -235px;
			color:#000;
		}
	</style>
</head>
<body>
	<div id="banner">
		<div class="bg">
			<div class="content">
				<div class="left">
					<div class='qr'>
						<img src="images/qr.png" alt="">
						<img src="images/line.png" id="line">
					</div>
					<div class="test">
						<img src="images/test.png" alt="" class="left-button">
						<div class="popup">
						    <p>发布日期：2020.10.19 版本号9.0.13</p>
						    <p>文件大小：3897833362KB</p>
						    <p>支持系统：Windows 7/8/10</p>
						    <p>MD5值：952287DC749728EBED0F2B61E950F970</p>
						    <p>温馨提示：特约测试PC版本可支持获得测试资格的iOS用户和安卓用户登录游玩，特约测试服为独立于正式服的游戏环境，无法进行充值，且部分玩法参数与正式服不同，后续测试PC版本的更新，请关注[阴阳师]官方网站和微博。
						    </p>
						</div>
					</div>
					<img src="images/download.png" alt="" class="left-button">

				</div>
				<div class="right">
					<ul class="right-top">
						<li class="focus">新闻资讯</li>
						<li>
							新服集结
							<span class="icon"></span>
						</li>
					</ul>
					<div class="right-bottom">
						
					</div>
				</div>
			</div>
		</div>
	</div>
</body>
</html>